<template>
  <div>
      <!-- 搜索框 -->
        <div class="search">
        <div class="input"> <icon type="search" size="20"/><input type="text" @input="search" v-model="term"></div> 
        <span>取消</span>
    </div>
       <!-- 搜索提示 -->
    <main v-if="term == ''">
      <p>大家都在搜</p>
      <div>
        <span
          class="item"
          v-for="(item, index) in showlist"
          :key="index"
          @click="tag(item.keyword)"
        >
          {{ item.keyword }}
        </span>
      </div>
    </main>
    <!-- 搜索回显 -->
    <main v-else-if="term != ''" >
      <span
        class="item"
        v-for="(item, index) in searchlist"
        :key="index"
        v-html="item.name"
        @click="godeatil(item.value)"
      >
      </span>
    </main>
     <!-- 历史搜索 -->
    <main v-show="term == ''">
      <div v-if="historylist.length">
            <p>历史搜索</p>
        <div>
        <p
            class="historyitem"
          v-for="(item, index) in historylist"
          :key="index"
          
        >
            <span>{{item}}</span><span @click="detele(index)">X</span>
        </p>
      </div>
      <p class="clear" @click="clearhistory">清除历史记录</p>
      </div>
    </main>
    <b></b>
  </div>
</template>

<script>
import request from "../../util/search";
export default {
  data() {
    return {
      // 搜索提示列表
      showlist: [],
      //搜索回显
      searchlist: [],
      //搜索历史
      historylist:[],
      //搜索标题
      term: "",
      //防抖
      time:null,
    };
  },
  async onShow() {
    //获取搜索提示
    let res = await request.get("/main/hotword", { from_source: "xcx_search" });
    this.showlist = res.list;
  },
  methods: {
    //搜索按钮
    search(e) {
      clearInterval(this.time)
      this.term = e.detail.value;
      if (this.term != "") {
      this.time= setTimeout(() => {
          request
            .get("/main/suggest", {
              func: "suggest",
              suggest_type: "accurate",
              sub_type: "tag",
              main_ver: "v1",
              highlight: "",
              tag_num: "10",
              from_source: "xcx_search",
              term: this.term,
            })
            .then((ok) => {
              this.searchlist = ok.result.tag;
            });
             this.historylist.unshift(this.term)
        }, 2000);
     
     }
    },
    //取消按钮
    done() {
      this.term = "";
     uni.navigateBack()
    },
    //点击搜索提示
    tag(e) {
       clearInterval(this.time)
      this.searchlist=[]
      this.term = e;
      if (this.term != "") {
     this.time=  setTimeout(() => {
          request
            .get("/main/suggest", {
              func: "suggest",
              suggest_type: "accurate",
              sub_type: "tag",
              main_ver: "v1",
              highlight: "",
              tag_num: "10",
              from_source: "xcx_search",
              term: this.term,
            })
            .then((ok) => {
              this.searchlist = ok.result.tag;
            });
            this.historylist.unshift(this.term)
        }, 2000);
      }
    },
    //清空历史搜索
    clearhistory(){
      this.historylist=[]
    },
    //删除搜索历史一条
    detele(index){
      this.historylist.splice(index,1)
    },
    //去搜索详情
    godeatil(value){
      uni.navigateTo({ url: `/pages/searchdetail/index?keyword=${value}` })
    }
  },
  
};
</script>

<style lang="scss" scoped>

//搜索框
.search {
  height: 100rpx;
  background: #fff;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1rpx solid #ccc;
  .input {
    background: rgb(243, 243, 243);
    width: 80%;
    height: 60rpx;
    border-radius: 20rpx;
    line-height: 100rpx;
    display: flex;
    flex-direction: row;
    icon {
      margin: 0 20rpx;
    }
    input {
      height: 60rpx;
      line-height: 60rpx;
    }
  }
}
main {
  p {
    margin: 30rpx 0;
    padding-left: 20rpx;
  }
  .list {
    display: block;
  }
  .item {
    display: inline-block;
    padding: 6rpx 30rpx;
    margin: 14rpx;
    background: rgb(243, 243, 243);
    font-size: 24rpx;
    border-radius: 10rpx;
  }
  .active {
    display: none;
  }
  .historyitem{
      display: flex;
      justify-content: space-between;
      border-bottom: 1rpx solid #ccc;
      span{
          margin: 10rpx 40rpx;
      }
  }
  .clear{
      text-align: center;
      color: #ccc;
  }
}
</style>